<template>
  <PageWrapper>
    <template #headerContent> <WorkbenchHeader /> </template>
   
  <!-- <div v-if="messages.length" style="position: fixed;z-index: 999; bottom: 20px;width: 87%;max-height: 80px;">
      <div class="scroll-container">
        <div class="message-list" :style="{ 'animation-duration': duration + 's' }">
          @click="messagesxq(item)"
          <div v-for="(item, index) in messages" :key="index"  class="message">
            <div style="display: inline-block;" v-html="item.msgContent"></div>
          </div>
        </div>
      </div>
    </div> -->
    <div class="lg:flex" style="min-height: 80vh;flex: 1;">
      <div class="lg:flex w-full enter-y" style="display: flex;flex-direction: column;">
        <div class="lg:flex" style="flex: 1;">
          <!-- <Notice :loading="loading" class="!lg:w-3/9 enter-y !mr-4" /> -->
          <!-- <Message :loading="loading" class="lg:w-3/9 enter-y !mr-4"/> -->

          <QuickNav :loading="loading" class="lg:w-3/9 enter-y" />
        </div>
        <div class="lg:flex !mt-4" style="flex: 1;">
          <!-- <PmWarning :loading="loading" class="lg:w-3/9 enter-y !mr-4" />
          <PmOverdue :loading="loading" class="lg:w-3/9 enter-y !mr-4" />
          <PmDelay :loading="loading" class="lg:w-3/9 enter-y" /> -->
        </div>
      </div>
      <!-- <div class="lg:w-3/10 w-full enter-y lg:flex" style="flex-direction: column;">
        <QuickNav :loading="loading" class="enter-y" />
        <Card class="!my-4 enter-y" :loading="loading">
          <img class="xl:h-50 h-30 mx-auto" src="../../../../assets/svg/illustration.svg" />
        </Card>
        <Message :loading="loading" class="!mt-4 "/>
        <PmDelay :loading="loading" class="!mt-4 enter-y" />
        
      </div> -->
    </div>
    
  </PageWrapper>
</template>
<script lang="ts">
  export default defineComponent({
    name: 'Workbench',
  });
</script>
<script lang="ts" setup>
  import { defineComponent, ref, onMounted } from 'vue';
  import { Card } from 'ant-design-vue';
  import { PageWrapper } from '/@/components/Page';
  import WorkbenchHeader from './components/WorkbenchHeader.vue';
  import ProjectCard from './components/ProjectCard.vue';
  import QuickNav from './components/QuickNav.vue';
  // import DynamicInfo from './components/DynamicInfo.vue';
  // import SaleRadar from './components/SaleRadar.vue';

  import Notice from './components/Notice.vue';
  import Message from './components/Message.vue';
  import PmDelay from './components/PmDelay.vue';
  import PmWarning from './components/PmWarning.vue';
  import PmOverdue from './components/PmOverdue.vue';
  import projectInfo from './components/projectInfo.vue';
  import projectType from './components/projectType.vue';
  import contributionType from './components/contributionType.vue';
  import { useGo } from '/@/hooks/web/usePage';
  import { getNewNotice } from '/@/api/msg/msgInner';
  const go = useGo();
  const loading = ref(true);

  setTimeout(() => {
    loading.value = false;
  }, 1500);

  
  function messagesxq(record: Recordable) {
    go('/msg/view?id=' + record.msgPush.id);
  }

  // const duration = 20; // 滚动一次的时长（秒）
  // const messages = ref([])

  // onMounted(async () => {
  //  let res = await getNewNotice();
  //  messages.value = res.data
  // });



</script>
<style scoped>
  .jeesite-page-wrapper .jeesite-page-wrapper-content {
    padding: 0;
    border-radius: 5px;
}
  .jeesite-page-wrapper-content-bg {
      background-color: #f0f2f5;
  }
  .scroll-container {
    /* position: fixed;
    width: 100%;
    bottom: 0; */
  overflow: hidden;
  /* position: relative; */
  white-space: nowrap;
}
 
.message-list {
  /* position: absolute; */
  /* top: 0;
  left: 0; */
  animation-name: scroll;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-delay: 0s; /* 延迟开始滚动 */
}
 
.message {
  display: inline-block;
  padding: 0 10px;
  cursor: pointer;
}
 
@keyframes scroll {
  from {
    transform: translate3d(100%, 0, 0);
  }
  to {
    transform: translate3d(-100%, 0, 0);
  }
}
</style>
